import './index.less'

import React, { useRef } from 'react'
import {
  onGetThirdCouponListXhr,
  onPostDeleteThirdCouponXhr,
} from '@/api/coupon'
import ATablePage from '@/components/ATablePage'
import { useNavigate } from 'react-router-dom'
import AToast from '@/components/AToast'
import { ExclamationCircleFilled } from '@ant-design/icons'
import { Modal } from 'antd'

const { confirm } = Modal

// import { listMock } from './mock' // mock数据

const ThirdCoupon = () => {
  const navigate = useNavigate()
  const tablePageRef = useRef(null)
  const handleDelete = async (id, info) => {
    if (!id) return AToast.warning('优惠券id不存在')
    confirm({
      title: '确认删除该优惠券?',
      icon: <ExclamationCircleFilled />,
      content: `优惠券:${info?.name}-${info?.groupProductId}`,
      okText: '确认',
      okType: 'danger',
      cancelText: '取消',
      onOk: async () => {
        try {
          const res = await onPostDeleteThirdCouponXhr({ id })
          if (res?.success) {
            AToast.success('删除优惠券成功')
            tablePageRef.current?.tableRefresh() // 刷新列表
          } else {
            AToast.error(`删除优惠券失败: ${res?.errMsg}`)
          }
        } catch (e) {
          AToast.error(`删除优惠券失败: ${e}`)
        }
      },
    })
  }
  const filterList = [
    {
      label: '渠道',
      name: 'channel',
      type: 'select',
      defaultValue: '',
      options: [
        {
          label: '全部',
          value: '',
        },
        {
          label: '美团',
          value: 1,
        },
        {
          label: '点评',
          value: 2,
        },
        {
          label: '抖音',
          value: 3,
        },
      ],
    },
    {
      label: '产品名称',
      name: 'productName',
    },
    {
      label: '团购Id',
      name: 'groupProductId',
    },
  ]
  const columns = [
    {
      title: '第三方券信息',
      dataIndex: 'couponInfo',
      width: 160,
      render: (v) => {
        const { channelLabel, groupProductId, name, salePrice } = v || {}
        return (
          <div className="code-info">
            <div>
              渠道：<span className="feild-text">{channelLabel || '--'}</span>
            </div>
            <div>
              团购ID：
              <span className="link-text">{groupProductId || '--'}</span>
            </div>
            <div>
              产品名称：<span className="link-text">{name || '--'}</span>
            </div>
            {/* <div>
              售价：<span className="link-text">{salePrice || '--'}</span>
            </div> */}
          </div>
        )
      },
    },
    {
      title: '关联内部券信息',
      dataIndex: 'couponRelList',
      width: 120,
      render: (v) => {
        return v?.length > 0 ? (
          <div className="relation-copuon-flex-box">
            {v?.map((item) => (
              <div className="relation-copuon" key={item?.couponName}>
                {item?.couponName}*{item?.quantity}
              </div>
            ))}
          </div>
        ) : null
      },
    },

    {
      title: '操作',
      dataIndex: 'operation',
      width: 120,
      render: (_, record) => {
        return (
          <div>
            <a
              onClick={() =>
                navigate(
                  `/page/product/thirdCoupon/addThirdCoupon?id=${record?.couponInfo?.id}`
                )
              }
              className="a-link"
              style={{ color: '#3D86EE' }}
            >
              编辑
            </a>
            <a
              onClick={() =>
                navigate(
                  `/page/product/thirdCoupon/addThirdCoupon?id=${record?.couponInfo?.id}&type=detail`
                )
              }
              style={{ color: '#3D86EE' }}
              className="a-link"
            >
              查看
            </a>
            <a
              onClick={() =>
                handleDelete(record?.couponInfo?.id, record.couponInfo)
              }
              style={{ color: '#D60D25' }}
              className="a-link"
            >
              删除
            </a>
          </div>
        )
      },
    },
  ]

  const actionList = [
    {
      label: '新增',
      onClick: () => {
        navigate('/page/product/thirdCoupon/addThirdCoupon')
      },
    },
  ]

  return (
    <ATablePage
      ref={tablePageRef}
      filter={{
        filterList,
        column: 3,
      }}
      table={{
        columns,
        bordered: true,
        request: {
          xhr: onGetThirdCouponListXhr,
        },
        // initData: listMock,
      }}
      className="verification-page"
      actionList={actionList}
    />
  )
}
export default ThirdCoupon
